<template>
  <div class="ysbz body">
    <div>
      <header class="ysHeader">
        <p>
          <router-link :to="{path:'/Home'}">
            <img src="../../assets/image/back.png" class="img">
          </router-link>
        </p>

        <p>预算</p>
        <p>
          <router-link :to="{path:'/ysck'}">
            <img src="../../assets/image/toCK.png" class="img">
          </router-link>
        </p>
      </header>
      <nav>
        <div class="ysNav">
          <div @click="jump()">
              <p class="ysIcon">
                <img class="img" src="../../assets/image/YSBZ-check.png" alt="预算编制">
              </p>
              <p class="ysText">预算编制</p>
          </div>
          <div @click="change()">
              <p class="ysIcon">
                <img class="img" src="../../assets/image/YSSH.png" alt="预算审批">
              </p>
              <p class="ysText ysTextColor">预算审批</p>
          </div>
          <div>
              <p class="ysIcon yszgIcon">
                <img class="img" src="../../assets/image/YSTZ.png" alt="预算调整">
              </p>
              <p class="ysText ysTextColor">预算调整</p>
          </div>
        </div>
        <div class="ysYuanIcon">
          <span class="yuanIcon">
            <img class="img" src="../../assets/image/yuan.png">
          </span>
        </div>

      </nav>
      <main class="ysBody">
        <div class="ysSelect">
          <div>
            <p>预算日期</p>
            <div>
              <input type="text" class="inputSelect" disabled="true" >
              <p></p>
              <p class="selectBnt">
                <img src="../../assets/image/selectBnt.png">
              </p>
            </div>
          </div>
          <div>
            <p>添加项目</p>
            <div>
              <input type="text" class="inputSelect" disabled="true">
              <p></p>
              <p class="selectBnt">
                <img  src="../../assets/image/selectBnt.png">
              </p>
            </div>
          </div>

        </div>
        <div class="ysTable">
          <ul>
            <li name="ystzTableLi">
              <p>项目</p>
              <p>金额</p>
              <p>备注</p>
            </li>
            <li name="ystzTableLi" class="tableBody" v-for="(item,index) in addTr">
              <div>
                <p v-bind:class="{jd_1:item.JD_1,jd_2:item.JD_2,jd_3:item.JD_3,jd_4:item.JD_4,jd_5:item.JD_5}">{{item.MC}}</p>
                <p>
                  <input type="number" @keyup="changeMoney(index,0)" @focus="moneyZero(index)" @blur="changeMoney(index,1)" @keydown="changeMoney(index,0)"
                    v-model="item.value" class="input" v-bind:class="{inputMjjd:item.MJJD}" v-bind:disabled="!item.MJJD">
                </p>
                <p >{{item.BZ}}</p>
              </div>
            </li>

            <li name="ystzTableLi" class="tableBody total">
              <div>
                <p>合计</p>
                <p >2156元</p>
              </div>
            </li>
            <li name="ystzTableLi" class="tableBody total">
              <div>
                <p>合计</p>
                <p >两千一百五十六元</p>
              </div>
            </li>
          </ul>
        </div>
  
        <div class="ystjBnt" >
          <p>
            <img class="img" src="../../assets/image/ystjBtn.png" alt="预算提交按钮">
            <p style="line-height:5vw;" @click='commit'>提交预算</p>
          </p>

        </div>
      </main>




      <!--<div class="mask" v-show="removeModel">
        <div class="model">
          <div class="removeData">
            <p>是否要删除此项目</p>
            <div class="removeBtn">
              <p v-tap="{methods:remove,data:0}">取消</p>
              <p v-tap="{methods:remove,data:1}">确定</p>
            </div>
          </div>

        </div>
      </div>-->

    </div>
 




  </div>
</template>

<script>
import {havePower} from '../../utils/index'
  export default {
    name: 'Budget',
    data() {
      return {

        addTr: [{
          "MC":"活动费用",
          "value":'1',
          "BZ":"嘿嘿"
        },
        {
          "MC":"外出费用",
          "value":'500',
          "BZ":"呵呵"
        },
        {
          "MC":"交通费用",
          "value":'1000',
          "BZ":"哈哈"
        },
         {
          "MC":"出差费用",
          "value":'655',
          "BZ":"嘎嘎"
        },
        ],
   
      }
    },

 methods:{
   jump(){
     this.$router.push("/Budget")
   },
   change(){
     this.$router.push("/BudgetTwe")
   },
   commit(){
    if (havePower() ){
      alert('您没有操作权限')
    } else {
      alert('您没有操作权限')
    }
   }
 }


  }

</script>

<!-- Add "scoped" attriBnte to limit CSS to this component only -->
<style scoped>
 @import "./style.less"
</style>